<template>
	<view class="withdrawal-content">
		<view class="module1">
			<view class="myMoney">
				<view class="myTitle">{{$t('common.myBalance')}} ($)</view>
				<view class="myNum">{{amount}}</view>
			</view>
			<view class="myMoney">
				<view class="myTitle">{{$t('mine.withdrawal.teamIncome')}} ($)</view>
				<view class="myNum">{{team}}</view>
			</view>
		</view>
		<view class="module2">
			<u-radio-group activeColor="#F6DDA4" v-model="radioValue" placement="row"
				class="flex align-center justify-around">
				<u-radio labelColor="#9c9c9c" shape="circle" name="1" label="Balance Withdrawal"></u-radio>
				<u-radio labelColor="#9c9c9c" shape="circle" name="2" label="Team Withdrawal"></u-radio>
			</u-radio-group>
			<!-- <span class="minMoneyStyle">Withdrawal rules: Please fill in the correct wallet account number. The
				withdrawal time is from Monday to Friday (9:00-17:00), and the minimum withdrawal amount is US$1. If the
				information is correct, it will arrive in your account within 24 hours. There are no fees for
				withdrawals on tax-free days. Other daily withdrawals are subject to a 16% withdrawal fee, and tax-free
				days are the last and first day of each month. Using USDT to withdraw can only withdraw to the TRC20
				address.</span> -->
			<view class="bank">
				<u-action-sheet :actions="bankList" :show="bankShow" @close="bankShow=false"
					@select="selectClick"></u-action-sheet>
				<view class="flex justify-between" @click="bankShow=true">
					<view>{{selectBank.name}}</view>
					<uni-icons color="white" type="forward" size="20"></uni-icons>
				</view>

			</view>
			<view class="inputMoneyBox">
				<view class="numBox">{{$t('mine.withdrawal.amount')}}</view>
				<input type="number" :placeholder="$t('mine.withdrawal.enterAmount')" class="input"
					v-model="withdrawAmount"></input>

			</view>
			<u-button loadingText="$t('common.submit')" :loading="loading" :disabled="loading" class="sub-btn"
				shape="circle" @click="submit">{{$t('common.submit')}}</u-button>
		</view>

		<view class="rule-box">
			<view class="title">{{$t('mine.withdrawal.rules')}}</view>
			<view>{{$t('mine.withdrawal.rulesContent')}}</view>
		</view>

		<u-popup :show="detailShow" mode="center" @close="redClose" customStyle="border-radius: 10px;
						width: 85%;
						max-height: 550px;
						max-width: 350px;">
			<view style=" padding: 20px 20px;">
				<view class="text-center" style="margin-bottom: 20px; font-size: 2opx; font-family: 700;">
					{{$t('mine.withdrawal')}}
				</view>
				<view class="text-center myNum" style="margin-bottom: 20px;">{{withdrawAmount}}$</view>
				<view class="flex align-center justify-between " style="margin-bottom: 10px;">
					<view class="tip">{{$t('mine.withdrawal.fees')}}</view>
					<view>{{withdrawFeeValue}}$</view>
				</view>
				<view class="flex align-center justify-between ">
					<view class="tip">{{$t('mine.withdrawal.rate')}}</view>
					<view>{{withdrawRate}}</view>
				</view>

			</view>
			<view class="text-center flex align-center justify-between" style="margin-top: 15px;margin-bottom: 20px;">
				<button class="mini-btn cancel-btn" type="primary" size="mini"
					@click="redClose()">{{$t('common.cancel')}}</button>
				<button class="mini-btn withdrad-btn" type="primary" size="mini"
					@click="withdraw()">{{$t('common.submit')}}</button>
			</view>
		</u-popup>

		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" :cancelText="$t('common.cancel')" :confirmText="$t('common.agree')"
				title="Withdrawal" @confirm="dialogConfirm" @close="dialogClose">

				<view style="width: 150px;color: black;">

					<view class="text-center myNum" style="margin-bottom: 20px; color: black;">{{withdrawAmount}}$
					</view>
					<view class="flex align-center justify-between " style="margin-bottom: 10px;color: black;">
						<view class="tip">{{$t('mine.withdrawal.fees')}}</view>
						<view>{{withdrawFeeValue}}$</view>
					</view>
					<view class="flex align-center justify-between " style="color: black;">
						<view class="tip">{{$t('mine.withdrawal.rate')}}</view>
						<view>{{withdrawRate}}</view>
					</view>

				</view>

			</uni-popup-dialog>
		</uni-popup>



	</view>



</template>

<script>
	import {
		getBalanceInfo
	} from "@/api/system/user.js"
	import {
		countInfo,
		withdrawal
	} from "@/api/withdrawal/withdrawal.js"
	import {
		getList
	} from "@/api/bankCard.js"
	export default {
		data() {
			return {
				radioValue: '1',
				amount: '0',
				team: '0',

				bankList: [],
				selectBank: {},
				bankShow: false,

				withdrawFee: 0,
				withdrawFeeValue: 0,
				withdrawRate: '16%',
				withdrawAmount: '',
				detailShow: false,
				loading: false
			};
		},
		onLoad: function() {
			this.balanceInfo();
			countInfo().then((rsp => {
				if (rsp.code == 200) {

					this.withdrawFee = rsp.data.withdrawFee;
					this.withdrawRate = (parseFloat(this.withdrawFee) * 100) + "%";
					console.log(this.withdrawRate)
				}
			}))
			getList().then(rsp => {
				if (rsp.code == 200) {
					if (rsp.rows.length > 0) {
						this.bankList = rsp.rows;
						this.selectBank = rsp.rows[0];
					} else {
						this.bankList.push({
							name: this.$t('mine.withdrawal.selectCard')
						});
						this.selectBank = {
							name: this.$t('mine.withdrawal.selectCard')
						};
					}
				}
			})

		},
		methods: {
			dialogClose() {},
			selectClick(item) {
				this.selectBank = item;
				console.log(item)
				this.bankShow = false;
			},
			balanceInfo() {
				getBalanceInfo().then(rsp => {
					if (rsp.code == 200) {
						this.amount = rsp.data.amount;
						this.team = rsp.data.team;
					}
				})
			},
			onNavigationBarButtonTap(e) {
				//top light icon de click event
				uni.navigateTo({
					url: '/pages/mine/withdrawal/withdrawal-record'
				})
			},
			redClose() {
				this.detailShow = false;
			},
			submit() {
				if (!this.selectBank.id) {
					uni.showToast({
						title: this.$t('mine.withdrawal.selectCard'),
						icon: 'none'
					})
					return;
				}

				if (!this.withdrawAmount) {
					uni.showToast({
						title: this.$t('mine.withdrawal.enterAmount'),
						icon: 'none'
					})
					return;
				}
				var withdrawAmount = Math.floor(parseFloat(this.withdrawAmount) * 100) / 100;
				this.withdrawAmount = withdrawAmount;
				if (withdrawAmount < 3) {
					uni.showToast({
						title: this.$t('mine.withdrawal.munimum') + "3$",
						icon: 'none'
					})
					return;
				}
				if (withdrawAmount > 8000) {
					uni.showToast({
						title: this.$t('mine.withdrawal.maxmum') + "8000$",
						icon: 'none'
					})
					return;
				}
				//1 balance； 2 team balance
				if (this.radioValue == '1') {
					if (withdrawAmount > parseFloat(this.amount)) {
						uni.showToast({
							title: this.$t('mine.withdrawal.exceedAmount'),
							icon: 'none'
						})
						return;
					}
				} else {
					if (withdrawAmount > parseFloat(this.team)) {
						uni.showToast({
							title: this.$t('mine.withdrawal.exceedAmount'),
							icon: 'none'
						})
						return;
					}
				}
				this.withdrawFeeValue = Math.floor((withdrawAmount * this.withdrawFee) * 100) / 100;
				//this.detailShow = true;
				this.$refs.alertDialog.open();
			},
			dialogConfirm() {
				var params = {
					"amount": this.withdrawAmount,
					"balanceType": this.radioValue,
					"bankId": this.selectBank.id
				}
				var $this = this;
				withdrawal(params).then(rsp => {
					if (rsp.code == 200) {
						uni.showToast({
							title: this.$t('mine.withdrawal.success'),
							icon: 'success'
						})
						$this.detailShow = false;
						$this.withdrawAmount = '';
						$this.balanceInfo();
					} else {
						uni.showToast({
							title: this.$t('mine.withdrawal.failed'),
							icon: 'error'
						})
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-color-bg;
		color: $uni-color-font;
	}

	.withdrawal-content {

		padding: 14px 12px;

		.module1 {
			border-radius: 10px;
			background-color: $uni-color-primary;
			color: $uni-color-box;
			height: 100px;
			display: flex;
			padding: 16px 20px;

			.myMoney {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.myTitle {
					font-size: 14px;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
				}

				.myNum {
					font-size: 22px;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					height: 30px;
					line-height: 30px;
				}
			}
		}

		.module2 {
			margin-top: 14px;
			background: $uni-color-box;
			box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .12);
			border-radius: 10px;
			padding: 16px 20px 20px 20px;

			// .minMoneyStyle {
			// 	margin: 21px 0 10px 0;
			// 	display: inline-block;
			// 	font-size: 14px;
			// 	font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
			// 	font-weight: 400;
			// 	color: grey;
			// }

			.bank {
				margin: 18px 0px;
				font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;

				.numBox {
					display: inline-block;
					margin-bottom: 10px;
					font-size: 14px;
					font-family: Antonio;
					font-weight: 600;
				}
			}

			.inputMoneyBox {
				margin-bottom: 14px;

				.numBox {

					display: inline-block;
					margin-bottom: 10px;
					font-size: 14px;
					font-family: Antonio;
					font-weight: 600;
				}

				.input {
					border-radius: 40px 40px 40px 40px;
					height: 40px;
					border: 1px solid $uni-color-primary;
					text-align: center;
					margin-top: 10px;
					margin-bottom: 14px;
					font-size: 16px;
					color: white;
					font-weight: 500;
				}

			}

			.sub-btn {
				background-color: $uni-color-primary;
				color: $uni-color-box;
				border: 0px;
			}
		}

		.rule-box {
			background: $uni-color-box;
			box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, .12);
			border-radius: 10px;
			padding: 12px 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 10px 0;
		}

		.myNum {
			font-size: 22px;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			height: 30px;
			line-height: 30px;
		}

		.tip {
			color: grey;
		}

		.cancel-btn {
			background-color: $uni-color-warning;
			border-radius: 15px;
		}

		.withdrad-btn {
			background-color: $uni-color-primary;
			border-radius: 15px;
		}

	}
</style>